<template>
	<el-dialog
		:visible="true"
		width="90%"
		:destroy-on-close="true"
		class="rempadding"
		:before-close="handleClose"
	>
		<div slot="title" class="dialog-title">
			<span class="title-text" style="margin-right: 15px">
				{{ rowVal.proxyAccount }}
			</span>
		</div>
		<el-table
			v-loading="loading"
			size="mini"
			border
			:data="tableData"
			class="small-size-table"
			style="margin-bottom: 15px"
			:header-cell-style="getRowClass"
			element-loading-spinner="el-icon-loading"
		>
			<el-table-column
				prop="staticsDate"
				align="center"
				:label="$t('report.date')"
			>
				<template slot-scope="scope">
					{{ scope.row.staticsDate || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberFirstDepositAmount"
				align="center"
				:label="$t('report.member_first_deposit_amount')"
			>
				<template slot="header">
					{{ $t('report.member_first_deposit_amount') }}
					<br />
					{{ $t('report.member_first_deposit_num') }}
				</template>
				<template slot-scope="scope">
					{{ handleCurrency(rowVal.currency) }}
					{{
						handleNumber(
							rowVal.currency,
							scope.row.memberFirstDepositAmount
						)
					}}
					<br />
					{{ handleNumber('', scope.row.memberFirstDepositNum, 0)
					}}{{ $t('report.people') }}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberRegisterAndFirstDepositNum"
				align="center"
				:label="$t('report.member_register_and_first_deposit_num')"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							'',
							scope.row.memberRegisterAndFirstDepositNum,
							0
						)
					}}{{ $t('report.people') }}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberDepositAmount"
				align="center"
				:label="$t('report.deposit_amount_in')"
			>
				<template slot="header">
					{{ $t('report.deposit_amount_in') }}
					<br />
					{{ $t('report.deposit_times') }}
				</template>
				<template slot-scope="scope">
					{{ handleCurrency(rowVal.currency) }}
					{{
						handleNumber(
							rowVal.currency,
							scope.row.memberDepositAmount
						)
					}}
					<br />
					{{ handleNumber('', scope.row.memberDepositTimes, 0)
					}}{{ $t('report.ci') }}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberWithdrawAmount"
				align="center"
				:label="$t('report.member_withdraw_amount')"
			>
				<template slot="header">
					{{ $t('report.member_withdraw_amount') }}
					<br />
					{{ $t('report.withdraw_times') }}
				</template>
				<template slot-scope="scope">
					{{ handleCurrency(rowVal.currency) }}
					{{
						handleNumber(
							rowVal.currency,
							scope.row.memberWithdrawAmount
						)
					}}
					<br />
					{{ handleNumber('', scope.row.memberWithdrawTimes, 0)
					}}{{ $t('report.ci') }}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberDepositWithdrawDifferAmount"
				align="center"
				:label="$t('report.deposit_withdraw_differ_amount')"
			>
				<template slot-scope="scope">
					{{ handleCurrency(rowVal.currency) }}
					{{
						handleNumber(
							rowVal.currency,
							scope.row.memberDepositWithdrawDifferAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberNetAmount"
				align="center"
				:label="$t('report.member_net_amount')"
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.memberNetAmount)">
						{{ handleCurrency(rowVal.currency) }}
						{{
							handleNumber(
								rowVal.currency,
								scope.row.memberNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="directlyUnderMemberNum"
				align="center"
				:label="$t('report.directly_under_member_num')"
			>
				<template slot="header">
					{{ $t('report.directly_under_member_num') }}
					<br />
					{{ $t('report.under_member_num') }}
				</template>
				<template slot-scope="scope">
					{{ handleNumber('', scope.row.directlyUnderMemberNum, 0)
					}}{{ $t('report.people') }}
					<br />
					{{ handleNumber('', scope.row.underMemberNum, 0)
					}}{{ $t('report.people') }}
				</template>
			</el-table-column>
			<el-table-column
				prop="directlyUnderProxyNum"
				align="center"
				:label="$t('report.directly_under_proxy_num')"
			>
				<template slot="header">
					{{ $t('report.directly_under_proxy_num') }}
					<br />
					{{ $t('report.under_proxy_num') }}
				</template>
				<template slot-scope="scope">
					{{ handleNumber('', scope.row.directlyUnderProxyNum, 0)
					}}{{ $t('report.people') }}
					<br />
					{{ handleNumber('', scope.row.underProxyNum, 0)
					}}{{ $t('report.people') }}
				</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
export default {
	mixins: [list, summaryList],
	props: {
		rowVal: {
			type: Object,
			default: () => {}
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			tableData: [],
			subSummary: {}
		}
	},
	methods: {
		loadData() {
			this.loading = true
			this.$api
				.getReportProxyReportDetai(this.rowVal)
				.then((res) => {
					this.loading = false
					this.tableData = res?.data?.record || []
					this.subSummary = res?.data?.summary || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.closeDialog()
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
</style>
